<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div class="root">
        姓:<input type="text" v-model="firstName"/><br/>
        名:<input type="text" v-model="lastName"/><br/>
        姓名:<span>{{fullName}}</span><br/>
    </div>
</body>

<script type="text/javascript">
    new Vue({
      el:'.root',
      data:{
          firstName:'张',
          lastName:'三'
      },
      /**
       * 简写
       * function其实就是get方法,在不需要set方法时可以使用
       */
      computed:{
        fullName: function() {
          return this.firstName + '-' + this.lastName
        }
      }
      /**
       * 完整写法
       */
      // computed:{
      //   fullName: {
      //     get(){
      //       return this.firstName + '-' + this.lastName
      //     },
      //   }
      // }
    })
</script>
</html>
